CSS Cores - Sistemas e Círculo Cromático

Transições

Ajuste as propriedades de transição e clique no botão para alternar o estado do bloco.

transition-property all none transform background-color width border-radius

duration: 500ms

delay: 0ms

timing-function

Interpolate-size (auto ↔ px)

interpolate-size Ativar interpolate-size: allow-keywords

Permite animar entre valores textuais (ex.: height: auto ↔ height: 160px).

Título

Este bloco demonstra a transição entre height: auto e um valor fixo em pixels. Sem interpolate-size: allow-keywords, a mudança acontece sem animação; com ele, a altura interpola suavemente.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, laudantium. Consequatur, omnis.

Transformações

translateX: 0px

translateY: 0px

translateZ: 0px

rotateZ: 0deg

rotateX: 0deg

rotateY: 0deg

scale3D: 1

skewX: 0deg

skewY: 0deg

perspective: none

back-visibility: visible

Animações

Selecione um @keyframes e ajuste os parâmetros da animação.

animation-name

duration: 1000ms

delay: 0ms

timing-function

iteration-count

direction

fill-mode

play-state